<template>
  <div ref="container" @dblclick="fullscreenSwich" style="width: 100%; height: 100%; background-color: #000; position: relative">
    <div class="jessibuca-card" style="width: 100%; padding-top: 56.25%; position: relative"></div>
    <div class="buttons-box" :id="domId">
      <div class="buttons-box-left">
        <i v-if="!playing" class="iconfont jessibuca-btn" @click="playBtnClick">&#xea81;</i>
        <i v-if="playing" class="iconfont jessibuca-btn" @click="pause">&#xe60f;</i>
        <i class="iconfont jessibuca-btn" @click="destroy">&#xe604;</i>
        <i v-if="isNotMute" class="iconfont jessibuca-btn" @click="mute">&#xe640;</i>
        <i v-if="!isNotMute" class="iconfont jessibuca-btn" @click="cancelMute">&#xe640;</i>
      </div>
      <div class="buttons-box-right">
        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
        <i class="iconfont jessibuca-btn" @click="screenshot">&#xe967;</i>
        <i class="iconfont jessibuca-btn" @click="playBtnClick">&#xe692;</i>
        <i class="iconfont jessibuca-btn" @click="fullscreenSwich">&#xe675;</i>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'jessibuca',
    props: ['videoUrl', 'error', 'hasAudio', 'height', 'domId'],
    data() {
      return {
        player: null, // 当前播放器实例
        playing: false,
        isNotMute: false,
        fullscreen: false,
        loaded: false,
        kBps: 0,
        btnDom: null,
      };
    },
    mounted() {
      this.btnDom = document.getElementById(this.domId);
      this.updatePlayerDomSize();
      window.addEventListener('resize', this.updatePlayerDomSize);
      this.$nextTick(() => {
        if (this.videoUrl) {
          this.play(this.videoUrl);
        }
      });
    },
    watch: {
      videoUrl(newUrl) {
        this.play(newUrl);
      },
    },
    methods: {
      updatePlayerDomSize() {
        const dom = this.$refs.container;
        if (!dom) return;
        const parent = dom.parentNode;
        dom.style.width = parent.clientWidth + 'px';
        dom.style.height = parent.clientHeight + 'px';
        dom.style.paddingTop = 0;
      },
      create() {
        if (!window.Jessibuca) {
          console.error('Jessibuca is not loaded');
          return;
        }

        const options = {
          container: this.$refs.container,
          decoder: '/jessibuca/decoder.js',
          hasAudio: this.hasAudio !== false,
          isNotMute: this.isNotMute,
          useMSE: true,
          useWCS: location.hostname === 'localhost' || location.protocol === 'https:',
          operateBtns: {
            fullscreen: false,
            screenshot: false,
            play: false,
            audio: false,
            record: false,
          },
        };

        this.player = new window.Jessibuca(options);

        this.player.on('play', () => (this.playing = true));
        this.player.on('pause', () => (this.playing = false));
        this.player.on('fullscreen', (msg) => (this.fullscreen = msg));
        this.player.on('mute', (msg) => (this.isNotMute = !msg));
        this.player.on('kBps', (kBps) => (this.kBps = Math.round(kBps)));
      },
      playBtnClick() {
        this.play(this.videoUrl);
      },
      play(url) {
        if (this.player) {
          this.destroy();
        }
        this.create();

        this.player.on('load', () => {
          this.player.play(url);
        });

        if (this.player.hasLoaded()) {
          this.player.play(url);
        }
      },
      pause() {
        if (this.player) {
          this.player.pause();
        }
      },
      destroy() {
        if (this.player) {
          this.player.destroy();
          this.player = null;
          this.playing = false;
          this.kBps = 0;
        }
      },
      screenshot() {
        if (this.player) {
          this.player.screenshot();
        }
      },
      mute() {
        if (this.player) {
          this.player.mute();
        }
      },
      cancelMute() {
        if (this.player) {
          this.player.cancelMute();
        }
      },
      fullscreenSwich() {
        if (this.player) {
          this.player.setFullscreen(!this.isFullscreen());
          this.fullscreen = !this.fullscreen;
        }
      },
      isFullscreen() {
        return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
      },
    },
    beforeUnmount() {
      this.destroy();
      window.removeEventListener('resize', this.updatePlayerDomSize);
    },
  };
</script>

<style scoped>
  .buttons-box {
    width: 100%;
    height: 28px;
    background-color: rgba(43, 51, 63, 0.7);
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    user-select: none;
    z-index: 10;
  }
  .jessibuca-btn {
    width: 20px;
    color: white;
    line-height: 27px;
    margin: 0 10px;
    padding: 0 2px;
    cursor: pointer;
    text-align: center;
    font-size: 0.8rem !important;
  }
  .buttons-box-right {
    position: absolute;
    right: 0;
  }
</style>
